<template>
  <div>
    <h1>测试"页面"</h1>
    <div>
      <span class="normal" v-bind:class="{'checked':isChecked}">文本</span>
      <input type="checkbox" v-bind:checked="isChecked?true:false" />
      <button v-on:click="toggleOperation">测试</button>
      <br />
      <ul style="text-align:left">
        <li v-for="(book,index) of books" v-bind:key="book.id">{{book.name+","+(index+1)}}</li>
      </ul>
      <div>
        <div>
          <h2>单选框</h2>
          <input type="radio" v-on:change="showRadioData" v-model="radioData" value="JS" />JS
          <input type="radio" @change="showRadioData" v-model="radioData" value="Java" />Java
          <input type="radio" v-on:change="showRadioData" v-model="radioData" value="Python" />Python
        </div>
      </div>
      <div>
        <select v-model="selectedData" @change="showData">
          <option v-for="option of options" :key="option.key" :value="option.key">{{option.value}}</option>
        </select>
      </div>
      <table style="width:100%">
        <tbody>
          <tr v-for="user of list" v-bind:key="user.id">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.password}}</td>
            <td>{{user.address}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.tableInit();
    this.selectedData = this.options[0].key; //指定一个默认选中的选项
    this.$bus.$off('bus-callback');   //预防重复触发，先解绑
    this.$bus.$on('bus-callback',text=>{
        console.log("Home回话："+text);
      });
  },
  data() {
    return {
      isChecked: false,
      radioData: "JS",
      books: [
        { id: 1, name: "鬼吹灯" },
        { id: 2, name: "三体——地球往事" },
        { id: 3, name: "机械宇宙——艾萨克.牛顿时、皇家学会和现代世界的诞生" }
      ],
      list: [],
      selectedData: "", //双向绑定的值，指向最终选择，该值会影响默认选择中的值
      //给用户的可能的选择
      options: [
        { key: 1, value: "JS" },
        { key: 2, value: "java" },
        { key: 3, value: "python" }
      ]
    };
  },
  methods: {
    showData: function() {
      window.console.log(this.selectedData); //在vue中需要使用window.console.log()函数
    },
    showRadioData() {
      window.console.log(this.radioData);
    },
    toggleOperation() {
      this.isChecked = !this.isChecked;
      this.$bus.$emit('bus-event',this.isChecked);
    },
    async tableInit() {
      let url = `/user/queryAll`;
      try {
        let response = await this.$axios.get(url);
        this.list = response.data.users;
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.normal {
  font-size: 12px;
  font-weight: bold;
}
.checked {
  color: red;
}
</style>